<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>节流</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            background-color: coral;
            color: wheat;
            font-size: 100px;
            text-align: center;
            line-height: 400px;
        }
    </style>
</head>

<body>
    <div class="box"></div>

    <script src="./Lodash/lodash.min.js"></script>
    <script>
        // 需求：鼠标移动次数 +1
        const box = document.querySelector('.box')
        let i = 1
        function mouseMove() {
            box.innerHTML = i++
        }

        // 手动实现节流函数
        // 要求：鼠标在盒子上移动，不管移动多少次，每隔500ms才 +1
        // 核心思路：
        // 节流的核心就是利用定时器（setTimeout）来实现
        // 1. 声明一个定时器变量
        // 2. 当鼠标每次滑动都先判断是否有定时器了，如果有定时器则不开启新定时器
        function throttle(fun, sleepTime) {
            let timner = null
            return function () {
                if (!timner) {
                    timner = setTimeout(function () {
                        fun()
                        timner = null
                    }, sleepTime)
                }
            }
        }

        // lodash库实现节流，语法： _.throttle(function, 时间)
        box.addEventListener('mousemove', throttle(mouseMove, 500))
    </script>
</body>

</html>